<template>
  <div class="home-items">
    <div class="hi_title">商品展示</div>
    <div class="hi_container clearfix">
      <div
        class="ht_cc"
        v-for="item in items"
        :key="item.id"
        @click="clickItem(item.id)"
      >
        <div class="ht_cc_img"><img v-lazy="item.pic" /></div>
        <div class="ht_cc_msg">
          <p class="ht_cc_msg_title">{{ item.name }}</p>
          <p class="ht_cc_msg_msg">
            {{ item.characteristic ? item.characteristic : '暂无描述' }}
          </p>
        </div>
        <div class="ht_cc_shopping clearfix">
          <span class="price">￥ {{ item.minPrice }}</span>
          <span class="add_cart">
            <van-icon
              name="like"
              color="red"
              @click.stop="addfavor(item.id)"
            />
            <van-icon
              name="cart-circle"
              color="red"
              @click.stop="addtoCart(item.id)"
            />
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['items'],
  methods: {
    clickItem (id) {
      // 点击商品,跳转到详情页
      this.$emit('clickItem', id)
    },
    addtoCart (id) {
      // 点击加购
      this.$emit('addtoCart', id)
    },
    addfavor (id) {
      this.$emit('addfavor', id)
    }
  }
}
</script>

<style lang="scss" scoped>
.hi_title {
  margin-top: 0.3rem;
  padding-left: 0.1rem;
  font-size: 0.38rem;
  color: #000;
  font-weight: 700;
  line-height: 0.6rem;
}
.hi_container {
  width: 100%;
  .ht_cc {
    display: inline-block;
    height: 5.8rem;
    overflow: hidden;
    border-radius: 0.2rem;
    width: 46%;
    background: #fff;
    margin: 0.2rem 2%;
    .ht_cc_img {
      width: 100%;
      img {
        width: 100%;
        height: 3.3rem;
      }
    }
    .ht_cc_msg {
      padding: 0.15rem;
      .ht_cc_msg_title {
        font-weight: 700;
        color: #000;
        font-size: 0.28rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 0.6rem;
      }
      .ht_cc_msg_msg {
        height: 0.92rem;
        word-break: break-all;
        text-overflow: ellipsis;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        color: #666;
        font-size: 0.26rem;
        line-height: 0.46rem;
      }
    }
    .ht_cc_shopping {
      padding: 0.15rem;
      .price {
        float: left;
        font-size: 0.36rem;
        line-height: 0.45rem;
        color: red;
      }
      .add_cart {
        float: right;
        font-size: 0.36rem;
        line-height: 0.45rem;
      }
    }
  }
}
i.van-icon.van-icon-like-o,i.van-icon.van-icon-like {
  margin-right: 0.25rem;
}
</style>
